<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>云盘分享</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="../../css/mui.min.css" />
		<link rel="stylesheet" href="../../css/index.css" />
		<link rel="stylesheet" href="../../css/minirefresh.css" />
	</head>

	<style>
		.mui-input-clear {
			width: 91% !important;
			background-color: #f2f2f2 !important;
		}
		
		.mui-search {
			text-align: center;
			position: fixed;
			z-index: 11;
			width: 100%;
			top: 50px;
			background: #fff;
		}
		
		.mui-search .mui-placeholder {
			left: 24px;
			bottom: 15px;
			text-align: left;
			line-height: 35px;
			margin-top: 10px;
		}
		
		.mui-active::before {
			left: 24px !important;
			line-height: 30px;
		}
		
		.mui-icon-clear {
			right: 13px !important;
		}
		
		.mui-icon-clear::before {
			line-height: 40px;
		}
		
		input[type=search] {
			border-radius: 3px;
			margin-top: 10px;
		}
		
		.title-out {
			height: 50px;
			margin-top: 6px;
			position: fixed;
			z-index: 11;
			background: #fff;
			width: 100%;
			top: 44px;
			border-bottom: 1px solid #e6e6e6;
		}
		
		.mui-content {
			background-color: #fff;
		}
		
		.mui-table-view-cell {
			padding: 14px 15px;
		}
		
		#list {
			top: 0px;
		}
		
		.list-img {
			width: 33px;
		}
		
		.list-title {
			font-size: 16px;
			color: #333;
		}
		
		.list-detail {
			float: left;
		}
		
		.list-time {
			font-size: 12px;
			color: #999;
		}
		
		.list-detail-img {
			line-height: 35px
		}
		
		.list-detail-font {
			margin-left: 12px;
		}
		
		.mui-table-view-cell:after {
			background-color: #e6e6e6;
		}
		
		.mui-table-view:before,
		.mui-table-view:after {
			background-color: #e6e6e6;
			height: 1px;
		}
		
		.circle {
			position: absolute;
			right: 18px;
			top: 30px;
			background: #fff;
			border: 1px solid #ccc;
			border-radius: 20px;
			padding: 4px;
		}
		
		.search-result {
			display: block;
			font-size: 14px;
			color: #999;
			border-top: 1px solid #e6e6e6;
			margin-top: -4px;
			text-align: left;
			z-index: 11;
			position: absolute;
			top: 109px;
			width: 100%;
			height: 32px;
			background: #fff;
			line-height: 30px;
			display: none;
		}
		
		.search-result span {
			margin-left: 16px;
		}
		
		.footer {
			width: 100%;
			height: 50px;
			z-index: 11;
			position: absolute;
			bottom: 0px;
			background-color: #333;
			display: none;
		}
		/**
 * new
 */
		/*#home_scroll .mui-scroll{
    padding-bottom: 40px;
}*/
		
		.mui-icon-checkmarkempty {
			background: #0487d0 !important;
			padding: 0px !important;
			width: auto;
			height: auto;
			font-size: 16px;
			color: #fff;
			border: none;
		}
		
		.footer {
			color: #fff !important;
			font-size: 12px;
			text-align: center;
		}
		
		.footer-img {
			width: 18px;
			margin-left: 3px;
		}
		
		.footer-img-out {
			margin-top: 5px;
			float: left;
			width: 20%;
		}
		
		.footer-font {
			margin-top: 1px;
			display: inline-block;
			color: #fff;
		}
		/**
 * 弹出框样式start
 */
		
		input::-webkit-input-placeholder {
			font-size: 16px;
			color: #999;
			line-height: 20px;
		}
		
		input::-moz-placeholder {
			font-size: 16px;
			color: #999;
			background-color: #f2f2f2;
			padding: 20px 0;
		}
		
		input::-moz-placeholder {
			font-size: 16px;
			color: #999;
			background-color: #f2f2f2;
			padding: 20px 0;
		}
		
		input::-ms-input-placeholder {
			font-size: 16px;
			color: #999;
			background-color: #f2f2f2;
			padding: 20px 0;
		}
		
		.mui-popup {
			border-radius: 3px;
			width: 300px;
		}
		
		.mui-popup-inner {
			border-radius: 1px 1px 0 0;
		}
		
		.mui-popup-button:first-child {
			border-radius: 0 0 0 3px;
		}
		
		.mui-popup-button:last-child {
			border-radius: 0 0 3px;
		}
		
		.mui-popup-title {
			padding: 10px;
			font-size: 20px;
			color: #333;
		}
		
		.mui-popup-button {
			font-size: 16px;
			color: #666;
			font-weight: 100 !important;
		}
		
		.mui-popup-button-bold {
			color: #0487d0;
		}
		
		.mui-popup-inner:after {
			background-color: #E6E6E6;
		}
		
		.mui-popup-input input {
			padding: 0px;
			border: none;
			margin: 15px 0;
			border-radius: 3px;
			padding: 20px 0;
			border: 1px solid #f2f2f2;
			margin-top: 8px;
			background-color: #f2f2f2;
		}
		/**
 * 弹出框样式end
 */
		
		span.version {
			border: 1px solid #00abbf;
			color: #00abbf;
			/*width: 34px;*/
			height: 17px;
			display: inline-block;
			font-size: 10px;
			line-height: 17px;
			padding: 0px;
			border-radius: 3px;
			margin-left: 6px;
		}
		
		.share {
			font-size: 12px;
			color: #666;
			margin-top: 46px;
			display: none;
		}
		
		.blue {
			color: #0487d0 !important;
		}
		
		.link {
			width: 90%;
			display: inline-block;
			word-wrap: break-word;
			text-align: justify;
		}
		
		.share-img {
			width: 13px;
			height: 13px;
			margin-bottom: 5px;
		}
		
		.mui-popover.mui-popover-action .mui-table-view {
			margin: 0px;
			margin-top: 6px;
			border-radius: 0px;
		}
		
		.mui-popover .mui-table-view {
			background: #fff;
		}
		
		#share {
			background: transparent;
			font-size: 16px;
		}
		
		#share .mui-table-view-cell {
			padding: 15px 15px;
		}
		
		.cancel-share {
			color: #333 !important;
		}
		
		.mui-popover.mui-popover-action .mui-table-view .mui-table-view-cell:after {
			background-color: #f2f2f2;
		}
		
		.list-detail.list-detail-font {
			width: 76%;
			margin-top: 8px;
		}
		
		.lip {
			overflow: hidden;
			text-overflow: ellipsis;
			word-wrap: break-word;
			word-break: break-all;
			display: -webkit-box;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
		}
		
		.dblock {
			display: inline-block;
			width: 100%;
		}
		/*#topPopover {
			position: fixed;
			top: 16px;
			right: 6px;
		}*/
		
		.mui-popover-arrow:after {
			background-color: #343b43;
		}
		
		.groupli p {
			color: #fff;
		}
		/*勾*/
		
		.condition {
			position: absolute;
			top: 10px;
			right: 10px;
		}
		/*群显示箭头*/
		
		#middlePopover .mui-table-view-cell:after {
			right: 15px;
			background-color: #343b43;
		}
		
		#middlePopover .mui-table-view,
		#middlePopover {
			background-color: #43484e !important;
			color: #fff;
		}
		
		.mui-popover .mui-popover-arrow:after {
			background-color: #43484e;
		}
		/*右侧群组显示*/
		
		.mui-popover .mui-scroll-wrapper {
			margin: 2px 0;
			overflow: initial;
		}
		
		#middlePopover .mui-active {
			background-color: #343b43;
		}
		
		#middlePopover {
			width: 110px;
			height: 92px;
		}
		
		#middlePopover .mui-table-view-cell {
			padding: 11px 15px;
		}
		
		.type {
			z-index: 10;
			line-height: 41px;
			float: right;
			margin-top: 53px;
			margin-right: 13px;
		}
		/*minirefresh*/
		
		.minirefresh-theme-default .minirefresh-downwrap {
			top: 0px;
		}
		
		.minirefresh-theme-default .minirefresh-upwrap {
			padding-top: 15px;
		}
		/*隐藏点击滚动顶端按钮*/
		
		.minirefresh-totop {
			display: none;
		}
		
		.minirefresh-wrap {
			top: 98px;
		}
		
		.minirefresh-theme-default .minirefresh-downwrap {
			display: none;
		}
		
		.mui-backdrop {
			background-color: rgba(0, 0, 0, .2);
		}
		
		#operation {
			color: #fff;
			line-height: 50px;
		}
	</style>

	<body>
		<!-- 主页面标题 -->
		<header class="mui-bar mui-bar-nav">
			<a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left" id="menus"></a>
			<h1 class="mui-title">云盘分享</h1>
			<a class="mui-pull-right" id="operation">操作</a>
		</header>

		<div class="type">
			<a href="#middlePopover" id="type">公开分享</a>
		</div>

		<!-- 主页面内容容器 -->
		<div id="content" class="minirefresh-wrap">

			<div id="home_scroll">

				<div class="minirefresh-scroll" id="list">

					<ul class="mui-table-view table" id="tableList">
						<li v-cloak class="mui-table-view-cell test" v-for="(item,index) in list" :urls="item.shareUrl" :urlpassword="item.sharePassword" :shareId="item.shareId">
							<div class="list-detail list-detail-img">
								<img class="list-img" src='../../icon/gcyp_wjj.png' />
							</div>
							<div class="list-detail list-detail-font">
								<p class="list-title lip">{{item.shareName }}</p>
								<p class="list-time">{{item.time}}</p>
							</div>

							<!--
                                	作者：1659419264@qq.com
                                	时间：2018-12-10
                                	描述：分享
                                -->
							<div class="share">
								<span class="dblock">链接：</span><span class="blue link">{{item.shareUrl}}</span>
								<br />
								<span v-if="item.sharePassword!=''"><img class="share-img" src="../../icon/lock.png" />&nbsp;密钥：</span><span class="blue">{{item.sharePassword}}</span>
							</div>

							<div class="circle" :index="index" :url="item.shareUrl" :shareId="item.shareId" ></div>
						</li>
					</ul>

				</div>
			</div>
		</div>

		<!--
        	时间：2018-12-10
        	描述：操作表
        -->
		<div id="share" class="mui-popover mui-popover-action mui-popover-bottom">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell op">
					<a href="#" class="blue opens">打开</a>
				</li>
				<li class="mui-table-view-cell op">
					<a href="#" class="blue copys">复制链接</a>
				</li>
			</ul>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell op" id="cancel-share">
					<a href="#share" class="cancel-share">取消分享</a>
				</li>
			</ul>
		</div>

		<!--中间弹出菜单-->
		<div id="middlePopover" class="mui-popover groupmenu">
			<div class="mui-popover-arrow mui-menu-popver"></div>
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell groupli" type="3">
							<p><span class="w80 hone">公开分享</span><span v-show="groupId == groups.groupId" class="condition">✓</span></p>
						</li>
						<li class="mui-table-view-cell groupli" type="2">
							<p><span class="w80 hone">秘钥分享</span><span v-show="groupId == groups.groupId" class="condition"></span></p>
						</li>
					</ul>
				</div>
			</div>
		</div>

		<script type="text/javascript" src="../../js/minirefresh.js"></script>
		<script src="../../js/mui.min.js"></script>
		<script type="text/javascript" src="../../js/vue2.5.js"></script>
		<script type="text/javascript" src="../../js/jquery-3.2.1.min.js"></script>
		<script type="text/javascript" src="../../js/globalVariable.js"></script>
		<script type="text/javascript" src="../../js/mask.js"></script>
		<script type="text/javascript">
			//=====================================start=========================================			
			// 上拉加载下拉刷新
			var miniRefresh;
			var pageNums = 1;

			function updown() {
				var loadFull = new Object();
				//loadFull.isEnable = false;
				//loadFull.isAuto = false;

				// 引入任何一个主题后，都会有一个 MiniRefresh 全局变量
				miniRefresh = new MiniRefresh({
					container: '#content',
					//isUseBodyScroll:true,
					down: {
						// 是否每次下拉完毕后默认重置上拉，为false时下拉刷新后不会自动重置上拉状态
						//isAutoResetUpLoading: true,
						//isAuto: true,
						callback: function() {

							setTimeout(function() {
								pageNums = 1;
								getlist('down');
							}, 500)

						}
					},
					up: {
						//isAuto:false,
						loadFull: loadFull,
						callback: function() {
							// 上拉事件
							setTimeout(function() {
								getlist('up');
							}, 500)
						},
					}
				});

			}

			updown();
			//=====================================end=========================================

			//2秘钥,3公开
			var TYPE = 3;
			$(document).on('tap', '.groupli', function() {
				$('.condition').empty();
				$(this).find('.condition').html("✓");
				var text = $(this).find('.hone').text();
				$("#type").html(text);
				TYPE = $(this).attr('type');
				mui('#middlePopover').popover('hide');
				miniRefresh.resetUpLoading();
				pageNums = 1;
				getlist();
			});

			mui.init();
			/*获取登录数据*/
			userInfo = getGlobalUserInfo();
			var filiList = new Vue({
				el: '#list',
				data: {
					list: [],
					shareId: null,
					copyurl: "", //复制链接
					sharepassword: "", //秘钥
				},
				watch: {
					list: function() {
						this.$nextTick(function() {
							operation();
							if(userInfo.isShowAllFilesName) {
								$(".lip").css('display', 'block');
							} else {
								$(".lip").css('display', '-webkit-box');
							}
						});
					}
				},
				mounted: function() {
					operation();
				}
			});
			/**
			 * 折叠面板
			 */

			mui('body').on('tap', '.mui-popover-action li>a', function() {
				var a = this,
					parent;
				//根据点击按钮，反推当前是哪个actionsheet
				for(parent = a.parentNode; parent != document.body; parent = parent.parentNode) {
					if(parent.classList.contains('mui-popover-action')) {
						break;
					}
				}
				//关闭actionsheet
				mui('#' + parent.id).popover('toggle');
			});

			//keylist();
			//publiclist();

			function getlist(arg) {
				$.ajax({
					type: 'GET',
					url: userInfo.url + '/cloud/getShareList?type=json',
					beforeSend: function(request) {},
					data: {
						projectId: userInfo.projId,
						groupId: userInfo.groupId,
						shareType: TYPE, //公开
						pageIndex: pageNums,
						pageSize: 6,
						tokenId: userInfo.tokenId,
					},
					dataType: "JSON",
					success: function(data) {
//						console.log(data.shareInfo[0].shareUrl)
						
						//						if(data.responseInfo.responseCode == 101) {
						//							//请重新登录
						//							mui.toast(data.responseInfo.responseMessage);
						//							miniRefresh.endUpLoading(true);
						//							return;
						//						}
						//登陆失效
						if(data.responseInfo.responseCode != 1) {
							tokenInvalid(data);
							return;
						}

						if(data.shareInfo != undefined) {
							if(arg == undefined || arg == 'down') {
								filiList.list = data.shareInfo;
							} else {
								filiList.list = filiList.list.concat(data.shareInfo);
							}
						}
						if(arg == 'down') {
							miniRefresh.endDownLoading();
						} else if(arg == 'up') {
							miniRefresh.endUpLoading(data.shareInfo == undefined);
						} else {
							//miniRefresh.endUpLoading((totalPage == pageNums));
						}
						$('.minirefresh-downwrap').show();

						if(data.shareInfo == undefined) {
							$('.minirefresh-downwrap').hide();
						}

						pageNums++;

					},
					error: function() {
						miniRefresh.endUpLoading(true);
					}
				});
			}

			var CLASSNAME = 'mui-icon mui-icon-checkmarkempty';

			var $_this;
			var shareIdList;
			/**
			 * 云盘分享页操作
			 */
			function operation() {

				$('#home_scroll .mui-table-view-cell').unbind();
				$('#home_scroll .mui-table-view-cell').on('tap', function() {
					if($(this).hasClass('test')) {
						$_this = this;
					}

					$('.circle').css('padding', '7px').css('top', '28px').addClass('padding');
					if($(this).find('.circle').hasClass(CLASSNAME)) {
						$(this).find('.circle').removeClass(CLASSNAME);
						$(this).find('.share').css('display', 'none');
						$(this).find('.circle').css('top', '28px');

						//判断是否还有选中的列表
						if(!$('#tableList').find('.circle').hasClass(CLASSNAME)) {

							$('.circle').css('padding', '4px').css('top', '30px').removeClass('padding');
							$('.footer').hide();
							$('#home_scroll .mui-scroll').css('padding-bottom', '0px');
							return;
						}

					} else {
						shareIdList = new Array();
						$(this).find('.circle').addClass(CLASSNAME);
						$(this).find('.share').css('display', 'block');
						$(this).find('.circle').css('top', '50px');
						//mui('#share').popover('toggle');
						/*$.each($("#tableList").children(), function(i, v) {
							if($(v).find(".circle").hasClass(CLASSNAME)) {
								var index = $(v).find(".circle").attr("index");
								shareIdList.push({
									shareId: $(v).attr("shareId"),
									index: index
								});
							}
						});
						filiList.copyurl = $(this).attr('urls');
						filiList.shareId = $(this).attr('shareId');
						filiList.sharepassword = $(this).attr('urlpassword');*/
					}

					//$(this).find('.circle').addClass('mui-icon mui-icon-checkmarkempty');
				})
			}
			
			//操作
			$("#operation").on("tap",function(){
				var selected = $(".mui-icon-checkmarkempty");
				if(selected.length == 0 ){
					mui.toast('请选择数据');
					return;
				}
				mui('#share').popover('toggle');
			});

			// 取消分享,未执行
			// #cancel-share
			$(document).on('tap', '#cancel-share', function() {
				//mui('#share').popover('toggle');
				//					$($_this).find('.circle').removeClass(CLASSNAME);
				//					$($_this).find('.share').css('display', 'none');
				//					$($_this).find('.circle').css('top', '28px');
				
				
				
				$.each($('.mui-icon-checkmarkempty'), function(i, v) {
                    var shareId = $(v).attr('shareId');
					$.ajax({
						type: 'POST',
						url: userInfo.url + '/cloud/cancelShareGroup?type=json',
						beforeSend: function(request) {},
						data: {
							tokenId: userInfo.tokenId,
							projectId: userInfo.projId,
							shareIdList: shareId,
						},
						async: true,
						success: function(data) {
							$('.circle').css('padding', '4px').css('top', '30px').removeClass('padding mui-icon mui-icon-checkmarkempty');
							$('.share').css('display', 'none');
							$('.circle').css('top', '28px');

							filiList.list.forEach((data, index) => {
								if(data.shareId == shareId) {
									filiList.list.splice(index, 1);
								}
							});
						}
					})

				})

			})

			/*复制链接*/
			$('.copys').on('tap', function() {
				var length = $('.mui-icon-checkmarkempty').length;
				if(length == 1) {
					copyShareUrl();
				} else {
					mui.toast("复制链接只能选择一个");
				}
				//				
			});

			/*复制链接到剪切板*/
			function copyShareUrl() {
				mui.plusReady(function() {
					//复制链接到剪切板
					var copy_content = $(".mui-icon-checkmarkempty").attr("url");//filiList.copyurl;
					//判断是安卓还是ios
					if(mui.os.ios) {
						//ios
						var UIPasteboard = plus.ios.importClass("UIPasteboard");  
						var generalPasteboard = UIPasteboard.generalPasteboard();   //设置/获取文本内容:
						  
						generalPasteboard.plusCallMethod({    
							setValue: copy_content,
							    forPasteboardType: "public.utf8-plain-text"  
						});  
						generalPasteboard.plusCallMethod({    
							valueForPasteboardType: "public.utf8-plain-text"  
						});
					} else {
						//安卓
						var context = plus.android.importClass("android.content.Context");
						var main = plus.android.runtimeMainActivity();
						var clip = main.getSystemService(context.CLIPBOARD_SERVICE);
						plus.android.invoke(clip, "setText", copy_content);
					}
					mui.toast('复制成功');
				});
			}

			/*打开*/
			$('.opens').on('tap', function() {
				var length = $('.mui-icon-checkmarkempty').length;
				if(length == 1) {

					mui.openWindow({
						url: '../at_cloud/cloud_project_shareContent.html',
						id: 'cloud_project_shareContent',
						extras: {
							shareId: $('.mui-icon-checkmarkempty').attr('shareId')
						},
					});
				} else {
					mui.toast("文件只能选择一个打开");
				}

			});

			//mui('#home_scroll').scroll();
		</script>
	</body>

</html>